const path = require("path");
const webpack = require('webpack');
//使用html模板进行html的生成
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	entry: {
		main :'./src/js/index.js'
	},
	output:{
		path: path.join(__dirname,"/dist"),
		filename: "js/[name]-[hash].js"
	},
	module: {
		rules:[
			//babel-loader 针对js文件进行转码，使其能够适合es5和es6
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			},
			//处理react的相关内容
			{
				test: /\.jsx$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			},
			//使用css loader和style loader出来css文件
			{
				test: /\.css$/,
				use: [ 'style-loader', 'css-loader' ]
			},
			//图片加载
			{
				test: /\.(gif|png|jpe?g|svg)$/i,
				use: [{
					loader: 'file-loader',
					options: {
						name: '[name].[ext]',
						outputPath: 'images/'
					}
				}]
			}
		]
	},
	plugins: [
		//html模板
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: 'index-[hash].html',
			minify: {
				collapseWhitespace: true,
			},
			chunks : ["main"]
		}),
		//清空插件，每次打包时清空之前的dist目录
		new CleanWebpackPlugin(['dist/']),
	]
};